<template>
  <div>
    <div class="search">
      <div>
        全程
        <img src="@/assets/img/xiajiantou.png" />
      </div>
      <div>
        品牌
        <img src="@/assets/img/xiajiantou.png" />
      </div>
      <div>
        特色
        <img src="@/assets/img/xiajiantou.png" />
      </div>
    </div>
    <div class="margin-top">
      <a
        href="#"
        class="cinema"
        v-for="(item, index) of yingyuan"
        :key="item.id"
      >
        <div class="cinema-top">
          <span>{{ item.nm }}</span>
          <span class="cinema-red"
            ><span class="cinema-size">{{ item.sellPrice }}</span
            >元起</span
          >
        </div>
        <div class="cinema-text">{{ item.addr }}</div>
        <div class="cinema-label">
          
        </div>
        <div
          class="cinema-bottom"
          v-if="item.promotion.cardPromotionTag !== ''"
        >
          <img
            src="https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png"
          />
          <div>{{ item.promotion.cardPromotionTag }}</div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "yingyuan",
  data() {
    return {
      yingyuan: [],
    };
  },
  mounted() {
    //获取数据
    axios
      .get(
        "/ajax/moreCinemas?movieId=0&day=2021-12-09&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1639033455421&cityId=30&optimus_uuid=1CF3FD80533F11ECAE29CD86D772C36EAB612553F05C4130B6D81F18BAA40FB6&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res.data.cinemas.cinemas);
        this.yingyuan = res.data.cinemas.cinemas;
      })
      .catch((err) => console.log(err));
  },
};
</script>

<style scoped>
/* 影院搜索 */
.search {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 157px;
  background-color: white;
}

.search div {
  width: 112px;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #999;
  text-align: center;
}
.search div:before {
  content: "";
  display: block;
  position: absolute;
  height: 0.4rem;
  top: 10px;
  left: 20px;
  border-left: 0.02rem solid #e8e8e8;
}
/* 影院 */
.cinema {
  margin-left: 15px;
  text-decoration: none;
  display: flex;
  flex-flow: column;
  padding: 13px 15px 13px 0;
}

.margin-top {
  margin-top: 190px;
}

.cinema-top {
  color: #333;
  font-size: 16px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cinema-red {
  font-size: 12px;
  color: rgb(241, 61, 55);
}

.cinema-red .cinema-size {
  font-size: 14px;
  margin-right: 3px;
}

.cinema-text {
  font-size: 12px;
  color: #666666;
  margin-top: 3px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cinema-label {
  font-size: 12px;
  padding-top: 3px;
  display: flex;
}

.cinema-label div div {
  padding: 0 3px;
  margin-left: 5px;
  border: 1px solid;
}

.cinema-bottom {
  font-size: 12px;
  color: #999;
  display: flex;
  padding-top: 3px;
}

.cinema-bottom img {
  width: 14px;
  height: 14px;
}
</style>
